<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>jQuery分步步骤</title>
	<link rel="stylesheet" href="js/bstable/css/bootstrap.min.css">
	<link rel="stylesheet" href="js/bstable/css/bootstrap-table.css">
<link rel="stylesheet" type="text/css" href="css/jquery.step.css" />
<link href="css/table.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js"></script>
<script src="js/jquery.step.min.js"></script>
	<link rel="stylesheet" href="css/all.css">

<style>
	html,body{height: 100%}
button {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
	background-color: #5bc0de;
}

.main {
	width: 90%;
	margin: 100px auto;
}

#step {
	margin-bottom: 60px;
}

.btns {
	float: left;
}

.info {
	float: left;
	height: 34px;
	line-height: 34px;
	margin-left: 40px;
	font-size: 28px;
	font-weight: bold;
	color: #928787;
}

.info span {
	color: red;
}
</style>
</head>

<body  style="background-color: #ecf0f5;font-family: 微软雅黑;color: #475059;min-width: 1000px;overflow: auto">
<div class="notice_main">
	<h6>表格一</h6>
	<div style="border-bottom: 1px #ccc solid;padding-bottom: 8px">
		<p style="line-height: 24px;font-size: 14px;padding: 4px 0 0 36px ;color:#bb8940;background-image: url(img/ts_03.png);background-repeat: no-repeat;background-position: 10px 8px;font-weight: bold">
			温馨提示</p>
		<ul class="ts">
			<li><span>*</span>该页面主要显示的是离职的相关程序。</li>
		</ul>
	</div>
   <div class="main">
	<div id="step"></div>
	<!--<div class="btns">-->
		<!--<button id="prevBtn">上一步</button>-->
		<!--<button id="nextBtn">下一步</button>-->
		<!--<button id="btn1">跳到第二步</button>-->
		<!--<button id="btn2">跳到第三步</button>-->
	<!--</div>-->
	   <div class="find-top1">
		   <table class="top-table">
			   <tr><td class="top-table-label">职员编号：</td><td><input type="text"></td><td class="top-table-label">职员姓名：</td><td><input type="text"></td><td class="top-table-label">出生年月：</td><td><input type="date"></td></tr>
			   <tr><td class="top-table-label">联系电话：</td><td><input type="text"></td><td class="top-table-label">联系邮箱：</td><td><input type="text"></td><td class="top-table-label">常住地址：</td><td><input type="text"></td></tr>

			   <tr><td class="top-table-label">证件号码：</td><td><input type="text"></td><td class="top-table-label">证件类型：</td><td><select><option>第二代身份证</option></select></td><td class="top-table-label">性别：</td><td><input type="radio" checked="checked" name="sex"><span>男</span><input type="radio" name="sex"><span>女</span></td></tr>
			   <tr><td class="top-table-label">学历：</td><td><select><option>研究生</option></select></td><td class="top-table-label">专业：</td><td><select><option>计算机</option></select></td><td class="top-table-label">毕业学院：</td><td><input type="text" ></td></tr>
			   <tr><td class="top-table-label">毕业时间：</td><td><input type="date"></td><td class="top-table-label">工作时间：</td><td><input type="date"></td><td class="top-table-label">工作年限：</td><td><input type="text"></td></tr>
			   <tr><td class="top-table-label">国籍：</td><td><select><option>中国</option></select></td><td class="top-table-label">民族：</td><td><select><option>汉族</option></select></td><td class="top-table-label">户籍地址：</td><td><input type="text" ></td></tr>
			   <tr><td class="top-table-label">入职部门：</td><td><select><option>研发部</option></select></td><td class="top-table-label">工作岗位：</td><td><select><option>前端开发</option></select></td><td class="top-table-label">入职时间：</td><td><input type="date" ></td></tr>
			   <tr><td class="top-table-label">实习时间：</td><td><input type="text"></td><td class="top-table-label">员工类型：</td><td><select><option>全职</option></select></td><td class="top-table-label">是否签订合同：</td><td><input type="radio" checked="checked" name="sex"><span>是</span><input type="radio" name="sex"><span>否</span></tr>
			   <tr><td class="top-table-label">离职原因</td><td colspan="5"><textarea></textarea></td></tr>

			   <tr><td colspan="6" style="text-align: center"> <button class="add-but"><i class="glyphicon glyphicon-edit"></i> 提交</button> <button class="add-del"><i class="glyphicon glyphicon-remove"></i> 取消</button></td></tr>

		   </table>
	   </div>
	   <div class="table-con">
		   <table id="table1" class="table-style"></table>
	   </div>
</div>
</div>
<script type="text/javascript">
	var $step = $("#step");
	var $index = $("#index");

	$step.step({
		index: 0,
		time: 500,
		title: ["填写申请表", "上传资料", "待审核", "已审核", "完成"]
	});

	$index.text($step.getIndex());

	$("#prevBtn").on("click", function() {
		$step.prevStep();
		$index.text($step.getIndex());
	});

	$("#nextBtn").on("click", function() {
		$step.nextStep();
		$index.text($step.getIndex());
	});

	$("#btn1").on("click", function() {
		$step.toStep(1);
		$index.text($step.getIndex());
	});

	$("#btn2").on("click", function() {
		$step.toStep(2);
		$index.text($step.getIndex());
	});
</script>
<script src="js/jquery.js"></script>
<script src="js/bstable/js/bootstrap.min.js"></script>
<script src="js/bstable/js/bootstrap-table.js"></script>
<script src="js/bstable/js/bootstrap-table-zh-CN.min.js"></script>
<script>
	$(function(){
		table1();

	})
	function table1(){
		$('#table1').bootstrapTable({
			method: "get",
			striped: false,
			singleSelect: false,
			url: "json/table1.json",
			dataType: "json",
			pagination: true, //分页
			pageSize: 10,
			pageNumber: 1,
			search: false, //显示搜索框
			contentType: "application/x-www-form-urlencoded",
			queryParams: null,
			columns: [
				{
					title: "编号",
					field: 'id',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '姓名',
					field: 'title',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '出生日期',
					field: 'date',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '性别',
					field: 'sex',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '学历',
					field: 'sex',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '部门',
					field: 'sex',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '职位',
					field: 'sex',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '类型',
					field: 'sex',
					align: 'center',
					valign: 'middle'
				},
				{
					title: '审核状态',
					field: 'person',
					align: 'center'
				},
				{
					title: '操作',
					field: 'opr',
					width: 180,
					align: 'center',
					formatter: function (cellval, row) {
						var  d = '<button  id="add" data-id="98" class="btn btn-xs btn-primary" onclick="add(\'' + row.ID + '\')">审核</button> ';
						var  c = '<button  id="add" data-id="98" class="btn btn-xs btn-primary" onclick="add(\'' + row.ID + '\')">删除</button> ';

						return  d+c;
					}
				}
			]
		});
	}
</script>
</body>
</html>